<template>
  <div>
    <Table :list="list">
      <!-- 定制标头 -->
      <template #title>
        <th>编号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <!-- <th>编辑</th> -->
        <th>操作</th>
      </template>
      <!-- 定制列表 -->
      <template #content="{ row }">
        <td>{{ row.id }}</td>
        <td>{{ row.goods_name }}</td>
        <td>{{ row.goods_price }}</td>
        <!-- 商品的标签 -->
        <td>
          <!-- tag添加 -->
          <input
            type="text"
            v-model="row.inputValue"
            v-if="row.inputVisible"
            @blur="row.inputVisible = false"
            @keyup.enter="addTag(row)"
          />
          <button class="btn btn-info" @click="row.inputVisible = true" v-else>
            +tag
          </button>
          <!-- v-for可以嵌套 -->
          <span class="badge btn-primary" v-for="tag in row.tags" :key="tag">{{
            tag
          }}</span>
        </td>
        <!-- <td><button class="btn btn-danger btn-sm">编辑</button></td> -->
        <td>
          <button class="btn btn-danger btn-sm" @click="delPrd(row.id)">
            删除
          </button>
        </td>
      </template>
    </Table>
  </div>
</template>

<script>
import Table from '../components/Table.vue'
export default {
  data () {
    return {
      list: []
    }
  },
  components: {
    Table
  },
  created () {
    this.getMssage()
  },
  methods: {
    getMssage () {
      this.axios({
        url: '/api/goods'
      }).then(res => {
        this.list = res.data.data
        console.log(res.data.data)
      })
    },
    delPrd (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    addTag (m) {
      if (!m.inputValue) {
        return alert('内容不能为空')
      }
      m.tags.push(m.inputValue)
      m.inputValue = ''
    }
  }
}
</script>

<style lang="less" scoped>
.badge {
  margin-right: 5px;
}
</style>
